<template>
  <div class="all_activity">
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
  >
    <div v-for="item in list" :key="item.id" class="card_box" @click="toDetail(item)">
      <img class="top_image" :src="item.actPath" >
      <div class="bottom_box">
        <div class="title_box">
          <div class="first_title">
            <div class="title">{{item.actTitle}}</div>
            <div class="status" :style="{background: statusColor(item.timeStatus)}">{{item.timeStatus | timeStr}}</div>
          </div>
          <div class="second_title">{{item.actSubTitle}}</div>
        </div>
        <div class="activity_time">
          活动时间: {{item.activityTime}}
        </div>
      </div>
    </div>
  </van-list>

  </div>
</template>


<script>
import { qryAppList } from '@/api/agent'
export default {
  inject: ['query'],
  data() {
    return {
      list: [],
      loading: false,
      finished: false
    };
  },
  filters: {
    timeStr(num) {
      let mapSource = {
        0: '未开始',
        1: '进行中',
        2: '已结束'
      }
      return mapSource[num]
    },
    
  },
  computed: {
    statusColor() {
      return (num) => {
        let mapSource = {
        0: '#FF9E5D',
        1: '#66CD99', 
        2: '#D9D8D8'
      }
      return mapSource[num]
      }
      
    } 
  },
  mounted() {
    this.getList()
    
  },
  methods: {
    getList() {
      const { deptId, shopId: storeId } = this.query
      qryAppList({deptId, storeId})
      .then(res => {
        let { data } = res.data
        data.forEach(item => {
          let nowTime = new Date().getTime()
          let start = new Date(item.actStartTime.replace(/-/g,'/'))
          let end = new Date(item.actEndTime.replace(/-/g,'/'))
          let startTime = start.getTime()
          let endTime = end.getTime()
          let startStr = `${start.getFullYear()}年${start.getMonth() + 1}月${start.getDate()}日`
          let endStr = `${end.getFullYear()}年${end.getMonth() + 1}月${end.getDate()}日`
          let mergeStr = startStr + '-' + endStr
          item.activityTime = mergeStr
          let timeStatus = startTime > nowTime ? 0 : (startTime < nowTime && endTime > nowTime ? 1 : 2)
          item.timeStatus = timeStatus
        })
        this.list = data
        
        this.finished = true;
      })
    },
    toDetail(item) {
      localStorage.setItem('bankApplyUrl', '')
      localStorage.setItem('activeIndex', 0)
      this.$store.dispatch('SET_STEP_INDEX', 0)
      const { id } = item
      const { type = '' } = this.query
      const { merchantNo: storeNo, shopId:storeId, userId  } = this.query
      this.$router.push({name: 'allActivityDetail', query: {id, storeNo, storeId, userId, type }});
    },
  }
}
</script>

<style lang="less" scoped>
  .all_activity {
    background-color: rgb(248, 245, 245);
    padding: 25px 30px 0;
    .card_box {
      box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.1);
      border-radius: 15px;
      width: 100%;
      background: #fff;
      overflow: hidden;
      margin-bottom: 30px;
    .top_image {
      width: 100%;
      height: 300px;
    }
    .bottom_box {
      padding: 30px 30px 40px;
      .title_box {
        .first_title {
          display: flex;
          justify-content: space-between;
          .title {
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #131313;
            max-width:500px;
            white-space: nowrap;
            overflow: hidden;//文本超出隐藏
            text-overflow: ellipsis;//文本超出省略号替代
          }
          .status {
            font-size: 22px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fff;
            width: 90px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            background: #66CD99;
            border-radius: 8px;
          }
        }
        .second_title {
          margin-top: 19px;
          width: 518px;
          font-size: 26px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #131313;
          white-space: nowrap;
          overflow: hidden;//文本超出隐藏
          text-overflow: ellipsis;//文本超出省略号替代
        }
      }
      .activity_time {
        margin-top: 40px;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
        line-height: 40px;
        opacity: 0.7;
      }
    }
  }
  }
  
</style>